﻿<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js+css3图片切换立体旋转代码</title>

	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<link rel="stylesheet" href="css/style.css">

</head>

<body>

	<div class="htmleaf-container">
		<div class="carousel" data-gap="2" data-bfc>
			<figure>
				<img src="./328189484400264168.jpg" alt="">
				<img src="./760700098457668971.jpg" alt="">
				<img src="./837275791407058831.jpg" alt="">
				<img src="./328189484400264168.jpg" alt="">
				<img src="./760700098457668971.jpg" alt="">
				<img src="./837275791407058831.jpg" alt="">
			</figure>
		</div>
	</div>

	<script type="text/javascript">
		'use strict';

		window.addEventListener('load', function () {
			var carousels = document.querySelectorAll('.carousel');
				carousel(carousels[0]);
		});

		function carousel(root) {
			var figure = root.querySelector('figure'),
				nav = root.querySelector('.nav'),
				images = figure.children,
				n = images.length,
				gap = root.dataset.gap || 0,
				bfc = 'bfc' in root.dataset,
				theta = 2 * Math.PI / n,
				currImage = 0,
				timer =null;
				autoPlay();
			setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
			window.addEventListener('resize', function () {
				setupCarousel(n, parseFloat(getComputedStyle(images[0]).width));
			});

			function setupCarousel(n, s) {
				var apothem = s / (2 * Math.tan(Math.PI / n));

				figure.style.transformOrigin = '50% 50% ' + -apothem + 'px';

				for (var i = 0; i < n; i++) {
					images[i].style.padding = gap + 'px';
				}
				for (i = 1; i < n; i++) {
					images[i].style.transformOrigin = '50% 50% ' + -apothem + 'px';
					images[i].style.transform = 'rotateY(' + i * theta + 'rad)';
				}
				if (bfc)
					for (i = 0; i < n; i++) {
						images[i].style.backfaceVisibility = 'hidden';
					}
			}

			function autoPlay(){
				timer = setInterval(function(){
				currImage++;
				rotateCarousel(currImage);
			  },5000)
			}
			function rotateCarousel(imageIndex) {
				figure.style.transform = 'rotateY(' + imageIndex * -theta + 'rad)';
			}
		}
	</script>
</body>

</html>